import React from 'react';
import { Row, Col } from 'antd';
import _ from 'lodash';
import { useTranslation } from 'react-i18next';
import AdvancedWrap from '@/components/AdvancedWrap';

interface Props {
  data: any;
}
export default function Index(props: Props) {
  const { t } = useTranslation('datasourceManage');
  const { data } = props;

  return (
    <div data-oid='1r67-b-'>
      <div className='page-title' data-oid='08lrvi-'>
        HTTP
      </div>
      <div className='flash-cat-block' data-oid='tnvp7g:'>
        <Row gutter={16} data-oid='3l8-sf0'>
          <Col span={24} data-oid='jst8qd9'>
            URL：
          </Col>
          <Col span={24} className='second-color' data-oid='.7-9r_1'>
            {data?.http?.urls
              ? _.map(data?.http?.urls, (url) => {
                  return (
                    <div key={url} data-oid='-lwg2f1'>
                      {url}
                    </div>
                  );
                })
              : data?.http?.url}
          </Col>
        </Row>
      </div>
      <div className='page-title' data-oid='345n2mm'>
        {t('form.auth')}
      </div>
      <div className='flash-cat-block' data-oid=':a56ru7'>
        <Row gutter={16} data-oid='0pg.7kq'>
          <Col span={8} data-oid='gzf1:5n'>
            {t('form.username')}：
          </Col>
          <Col span={8} data-oid='-whwuxq'>
            {t('form.password')}：
          </Col>
          <Col span={8} data-oid='i-fpeg8'>
            {t('form.skip_ssl_verify')}：
          </Col>
          <Col span={8} className='second-color' data-oid='coqsj3j'>
            {data?.auth?.basic_auth_user || '-'}
          </Col>
          <Col span={8} className='second-color' data-oid='ubj6iit'>
            {data?.auth?.basic_auth_password ? '******' : '-'}
          </Col>
          <Col span={8} className='second-color' data-oid='75n:yg9'>
            {data.http?.tls?.skip_tls_verify ? t('form.yes') : t('form.no')}
          </Col>
        </Row>
      </div>
      {!_.isEmpty(data?.http?.headers) && (
        <>
          <div className='page-title' data-oid='znhr3ym'>
            {t('form.headers')}
          </div>
          <div className='flash-cat-block' data-oid='7olurdd'>
            <Row gutter={16} data-oid='80z34wm'>
              {_.map(data?.http?.headers, (val, key) => {
                return (
                  <Col key={key} span={24} data-oid='x187mwv'>
                    {key + ' : ' + val}
                  </Col>
                );
              })}
            </Row>
          </div>
        </>
      )}
      <div className='page-title' data-oid='38qq69g'>
        {t('form.other')}
      </div>
      <div className='flash-cat-block' data-oid='k_pyk3c'>
        <Row gutter={16} data-oid='itgc.vg'>
          <Col span={8} data-oid='co.n-p1'>
            {t('form.es.version')}：
          </Col>
          <Col span={8} data-oid='fqvul7d'>
            {t('form.es.max_shard')}：
          </Col>
          <Col span={8} data-oid='3_m-2cf'>
            {t('form.es.min_interval')}：
          </Col>
          <Col span={8} className='second-color' data-oid='a-_wreo'>
            {data.settings?.version || '-'}
          </Col>
          <Col span={8} className='second-color' data-oid='zdgcban'>
            {data.settings?.max_shard || '-'}
          </Col>
          <Col span={8} className='second-color' data-oid='6g.b0m6'>
            {data.settings?.min_interval || '-'}
          </Col>
          <Col span={24} className='mt8' data-oid='kox1ki4'>
            {t('form.es.write_config')}:
          </Col>
          <Col span={24} className='second-color' data-oid='-8qgfvf'>
            {data.settings?.enable_write ? t('form.es.enable_write') : t('form.es.disable_write')}
          </Col>
        </Row>
        <AdvancedWrap var='VITE_IS_PRO,VITE_IS_ENT' data-oid='q:3b1o6'>
          <Row gutter={16} data-oid='j1:czeg'>
            <Col span={24} data-oid='fc9x810'>
              {t('form.cluster')}：
            </Col>
            <Col span={24} className='second-color' data-oid='w.mdz:4'>
              {data?.cluster_name || '-'}
            </Col>
          </Row>
        </AdvancedWrap>
      </div>
    </div>
  );
}
